<html>
	
	<LINK REL=StyleSheet HREF="theme.css" TITLE="">
	<script src="jquery-1.4.2.min.js"></script>
	<style>
		body{
			margin:0;
			padding:0;
			background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#5E5E65));
		}
		div {
			background:none;
		}
		#jqt ul.rounded {
			margin-top:5em;
			margin-bottom:5em;
		}
		#left-side{
			width:600px;
			height:800px;
			float:left;
		}
		#right-side{
			float:left;
			height:800px;
			border-left:2px solid gray;
			padding:5px;
		}
		.rsbtn{
			width:100px;
			height:30px;
			border-top-left-radius: 8px 8px;
			border-top-right-radius: 8px 8px;
			border-bottom-right-radius: 8px 8px;
			border-bottom-left-radius: 8px 8px;
			font-size:2em;
			text-align:center;
			font-weight:bolder;
			margin:10px;
		}
		.table-wrap{
			width:84px;
			height:84px;
			float:left;
			margin:10px;
		}
		.table{
			border-top: 0;
			-webkit-border-top-left-radius: 8px;
			-webkit-border-top-right-radius: 8px;
			border-top-left-radius: 8px 8px;
			border-top-right-radius: 8px 8px;
			border-bottom-right-radius: 8px 8px;
			border-bottom-left-radius: 8px 8px;
			border-bottom: #555858;
			list-style-type: none;
			padding: 10px 10px 10px 10px;
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C4D4E), to(#404142));
			overflow: hidden;
			margin:10px;
			width:60px;
			height:60px;
			float:left;
			
			font-size:3em;
			text-align:center;
			font-weight:bolder;
		}
		a{
			text-decoration:none;
		}
		.tbltype_0{
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C4D4E), to(#404142));
		}
		.tbltype_1{
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#245900), to(#388b00));
		}
		.tbltype_2{
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000263), to(#0004a3));
		}
		.tbltype_3{
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#510076), to(#6c009e));
		}
	</style>
	<body>
		<script>
			stt=["Reserved","Available","Using","Unclean"];
			function setTableStt(id,stt){
				$("#"+id).addClass("tbltype_"+stt);
			}
			function tbl_click(t){
				if(t.clicked!=true){
					t.clicked=true
					t.style.border="2px solid green";
					$(t).addClass("clicked")
				}else{
					t.clicked=false
					t.style.margin="10px";
					t.style.border="none";
					$(t).removeClass("clicked")
				}
			}
			function setStt(stt){
				console.log(stt);
				$(".clicked").attr("className","table clicked");
				$(".clicked").addClass("tbltype_"+stt);
			}
		</script>
		<div id="jqt" class="portrait">
			<div class="toolbar">
				<h1> Table Choosen</h1>
			</div>
			<div id="left-side">
				<script>for(var i=1;i<=30;i++)document.write('<div class="table-wrap"><div onclick="tbl_click(this)" class="table tbltype_'+Math.floor(Math.random()*4)+'" id="'+i+'">'+i+'</div></div>')</script>
			</div>
			<div id="right-side">
				<script>
					for(var i=0;i<stt.length;i++){
						document.write("<div class='rsbtn tbltype_" + i +" '><a href='javascript:setStt("+i+")'>"+stt[i]+"</a></div>")
					}
				</script>
			</div>
		</div>
		<script>
			
			setTableStt(3,1);
		</script>
	</body>
</html>